<template>
    <page-layout>
       	<bread-crumb 
			slot="breadcrumb" 
			:breadCrumbitems="breadCrumbItems" />
        <template v-slot:pagecontent>
             <h3>基础饼图</h3>
            <!-- 这个饼图viser原始demo代码网友意见做了改动，影响不大。 -->
            <ViserBasicPie />
            
            <h3>多折线图</h3>
            <!-- 下面这个组件写法尽管可用，vue并不推荐，因为html不区分大小写，最好写成烤肉串形式 -->
            <MultipleLine />
        </template>
    </page-layout> 
</template>

<script>
import PageLayout from '@/layouts/PageLayout.vue'
import BreadCrumb from '@/components/BreadCrumb.vue' 
import ViserBasicPie from './ViserBasicPie.vue'
import MultipleLine from './MultipleLine.vue'

export default {
    computed:{
        breadCrumbItems(){
            let routes = this.$route.matched	           
            return routes.map(function(item,index){
                return item.name;
            });
        }        
    },
    components:{			
        PageLayout,
        BreadCrumb,
		ViserBasicPie,
		MultipleLine
    }	
}
</script>